import React, { useState } from 'react'
import Header from '../layout/Header'
import Search from '../layout/Search'
import Main from '../layout/Main'
import { Button } from 'antd'
export default function ProductPurchasingStatistics() {
  const [status, SetStatus] = useState(5)
  const [searchHeight, SetsearchHeight] = useState('150px')
  const [columns, SetColumns] = useState([
    {
      title: '商品编号',
      dataIndex: 'documentnumber',
      key: 'documentnumber',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '规格',
      dataIndex: 'specification',
      key: 'specification',
    },
    {
      title: '单位',
      dataIndex: 'unit',
      key: 'unit',
    },
    {
      title: '数量',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '单价',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '总额',
      dataIndex: 'sum',
      key: 'sum',
    },

    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (text: any, record: any) => {
        return <div>
          <Button>详情</Button>
        </div>
      }
    },
  ])
  const [list, SetList] = useState([
    {
      id: 1,
      documentnumber: "7654331",
      name: "聚沙商贸",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    }, {
      id: 2,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    }, {
      id: 3,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },
    {
      id: 4,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },
    {
      id: 5,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },
    {
      id: 6,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },
    {
      id: 7,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },
    {
      id: 8,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },
    {
      id: 9,
      documentnumber: "7654331",
      name: "安格斯M3牛排",
      specification: "2kg/袋",
      unit: "袋",
      count: 6000,
      price: 100,
      sum: 600000,
    },

  ])
  const [pageSize, SetPageSize] = useState(5)
  const [page, SetPage] = useState(1)
  const paginationConfing = {
    page: page,
    total: list.length,
    pageSize: pageSize,
    showSizeChanger: true,
    pageSizeOptions: ['2', '3', '4', '5'],
    onchange: (page: number) => {
      SetPage(page)
    },
    onShowSizeChange: (current: number, size: number) => {
      SetPageSize(size)
      SetPage(current)
    }
  }
  return (
    <div>
      <Header status={status} />
      <Search status={status} searchHeight={searchHeight} />
      <Main status={status} columns={columns} list={list} paginationConfing={paginationConfing} />
    </div>
  )
}
